<!--
 * @Author: yuanqingqing 1194367511@qq.com
 * @Date: 2023-12-20 14:36:55
 * @LastEditors: miteng 973203639@qq.com
 * @LastEditTime: 2024-07-30 14:20:47
 * @Description: 
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
  <el-tag :type="tagType" :class="tagClass" :effect="tagEffect">{{ label }}</el-tag>
</template>

<script setup lang="ts">
enum TagType {
  Success = 'success',
  Warning = 'warning',
  Info = 'info',
  Danger = 'danger'
}
enum EffectType {
  Light = 'light',
  Dark = 'dark',
  Plain = 'plain',
}
interface DictItem {
  [key: string]: string | TagType | EffectType | undefined;
  label: string;
  value: string;
  type?: TagType;
  class?: string;
  effect?: EffectType;
}
const props = withDefaults(
  defineProps<{
    value: string
    dicts: [],
    valueName: string,
    lableName: string
  }>(),
  {
    value: '',
    dicts: () => [],
    valueName: 'value',
    lableName: 'label'
  }
)
// console.log(props)
// let item = <DictItem>{}
let item = {} as DictItem
if (props.dicts) {
  item = props.dicts.find((val: DictItem) => val[props.valueName] === props.value) || {
    label: props.value,
    value: props.value
  }
}

const label = item[props.lableName]
// const tagType: 'success' | 'warning' | 'info' | 'danger' = item.type || 'success';
const tagType: TagType = item.type || TagType.Success;
// const tagType = item.type || ''
const tagClass = item.class || ''
const tagEffect: EffectType = item.effect || EffectType.Light
</script>
